import React, { Component } from 'react'
import '../css/messageLogin.scss'
import axios from 'axios'

export default class MessageLogin extends Component {
    constructor(props){
        super(props)
        this.state={
            checked:false,
            display: 'none',
            click:false,
            background: '',
            txt:'获取验证码',
            cityList:[],
            int: 60,
            timer:null,
            value:'',
            token:null
            // result:[],
            // indexies:[]
        }
        this.countrys=this.countrys.bind(this)
        this.sendCode=this.sendCode.bind(this)
        this.getcity=this.getcity.bind(this)
        this.gettime=this.gettime.bind(this)
    }
    componentDidMount(){
        this.getcity()
    }
    gettime=()=>{
        this.setState({
            click:!this.state.click,
            background:this.state.click ? this.state.background : '#ccc',
            txt: this.state.click ? this.state.txt : '重新获取'
        },()=>{
            if(this.state.click=true){
                this.timer=setInterval(()=>{
                    this.setState({
                        int:--this.state.int
                    })
                    if(this.state.int <= 0){
                        clearInterval(this.timer)
                        this.setState({
                            txt: '获取验证码'
                        })
                        // console.log(this.state.int)
                    }
                },1000)
            }
        })
    }
    countrys=()=>{
        this.setState(prevState=>({
            checked: !this.state.checked,
            display:prevState.checked ?'none':'block'
        }))
    }
    sendCode=()=>{
        let telval=this.refs.telnum.value
        this.setState({
            click:!this.state.click,
            value:telval
        },()=>{
            localStorage.setItem("username",this.state.value)
        })
        
    }
    getcity=()=>{
        axios({
            url:'https://m.maizuo.com/gateway',
            methods:'get',
                headers:{
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"156801844010307921510555"}',
                    'X-Host': "mall.film-ticket.city.list"
            }
        }).then(res=>{
            this.setState({
                cityList:res.data.data.cities
            })
        })
    }
    render() {
        return (
            <div className="message">
                <header> 短信验证码登录</header>
                <ul>
                    <li className="country">
                        <span>国家和地区</span>
                        <div className="countryRight" onClick={this.countrys}>
                            <span>中国</span>
                            <i className="iconfont icon-arrow-down"></i>
                        </div>
                        <div className="isShow" style={{display:this.state.display}}>
                            <ul>
                                {
                                    this.state.cityList.map((item)=>{
                                        return  <li key={item.cityId}>{item.name}</li>
                                    })
                                }
                            </ul>
                        </div>
                    </li>
                    <li className="tel">
                        <span>+86</span>
                        <input type="text" placeholder="手机号"  ref="telnum" />
                    </li>
                    <li className="code">
                        <input type="text" placeholder="短信验证码"/>
                        <a ><button onClick={this.gettime} style={{background:this.state.background}}>{this.state.txt}({this.state.int})</button></a>
                    </li>
                    <li className="btn">
                        <button onClick={this.sendCode}>登录</button>
                    </li>
                    <li className="txt">
                        <span>未注册的手机号验证后将自动注册</span>
                        <span>账号密码登录</span>
                    </li>
                </ul>
                <footer>
                    <img src={require('../assets/images/chuizi.png')}/>
                </footer>
            </div>
        )
    }
}
